<!DOCTYPE html>
<html xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" lang="zh" xmlns:th="http://www.thymeleaf.org">
<body  class="list">
<div th:replace="include/head.html::html"></div>
<div class="layui-fluid  layui-anim-upbit layui-anim">
    <div class="layui-card">
        <!--表格中的数据 并不显示-->
        <div class="layui-card-body">
            <!--数据表格 -->
            <table class="layui-hidden" id="treeTable" lay-filter="treeTable"></table>
            <script type="text/html" id="switchTpl">
                <input type="checkbox" name="status" value="{{d.oid}}" lay-skin="switch" lay-text="启用|禁用"
                       lay-filter="status" {{ d.status== 1 ? 'checked' : '' }}>
            </script>
            <!--表格每行的 的操作按钮 -->
            <script type="text/html" id="toolbar">
                <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="add" shiro:hasPermission="sysDept:add">
                    <i class="layui-icon layui-icon-edit"></i>添加</a>
                <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit" shiro:hasPermission="sysDept:edit">
                    <i class="layui-icon layui-icon-edit"></i>编辑</a>
                {{#  if(d.oid != '00000000000000000000000000000000' ){ }}
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" shiro:hasPermission="sysDeptRole:del">
                    <i class="layui-icon layui-icon-edit"></i>删除</a>
                {{#  } }}
            </script>
        </div>
    </div>
</div>
<script type="text/javascript" th:inline="none">
    var editObj = null, ptable = null, treeGrid = null, tableId = 'treeTable', layer = null;
    layui.use(['jquery', 'treeGrid', 'layer'], function () {
        var $ = layui.jquery;
        treeGrid = layui.treeGrid;//很重要
        var form = layui.form;
        layer = layui.layer;
        ptable = treeGrid.render({
            id: tableId
            , elem: '#' + tableId
            , url: 'sysDept/json'
            , cellMinWidth: 100
            , idField: 'oid'//必須字段
            , treeId: 'oid'//树形id字段名称
            , treeUpId: 'parentOid'//树形父id字段名称
            , treeShowName: 'deptName'//以树形式显示的字段
            , heightRemove: [".dHead", 0]//不计算的高度,表格设定的是固定高度，此项不生效
            , height: 'full-70'
            , isFilter: false
            , iconOpen: true//是否显示图标【默认显示】
            , isOpenDefault: true//节点默认是展开还是折叠【默认展开】
            , loading: true
            , method: 'post'
            , isPage: false
            , cols: [[
                {type: 'numbers'}
                , {field: 'deptName', title: '部门名称'}
                , {field: 'leader', title: '负责人姓名'}
                , {field: 'phone', title: '负责人手机号'}
                , {field: 'email', title: '负责人邮箱'}
                , {field: 'status', title: '状态', align: 'center', templet: '#switchTpl'}
                , {field: 'sortNum', title: '排序'}
                , {fixed: 'right', width: 220, align: 'center', toolbar: '#toolbar'}
            ]]
            , parseData: function (res) {//数据加载后回调
                return res;
            }
            , onClickRow: function (index, o) {
                //console.log(index,o,"单击！");
            }
            , onDblClickRow: function (index, o) {
                //console.log(index,o,"双击");
            }
            , onCheck: function (obj, checked, isAll) {//复选事件
                //console.log(obj,checked,isAll);
            }
            , onRadio: function (obj) {//单选事件
                //console.log(obj);
            }
        });

        treeGrid.on('tool(' + tableId + ')', function (obj) {
            if (obj.event === 'del') {//删除行
                del(obj);
            } else if (obj.event === "add") {//添加行
                add(obj);
            } else if (obj.event === "edit") {//编辑
                edit(obj);
            }
        });

        //监听 按钮
        form.on('switch(status)', function(obj){
            var title = "";
            if (obj.elem.checked) {
                title = "你确定启用部门吗？";
            } else {
                title = "你确定禁用部门吗？如果存在下级部门则一并禁用！";
            }
            layer.confirm(title, {icon: 3, title: '提示'},
                function (index) {//确定回调
                    updateStatus(obj, index, obj.value);
                }, function (index) {//取消回调
                    obj.elem.checked = !obj.elem.checked;
                    form.render();
                    layer.close(index);
                }
            );
            function updateStatus(obj, index, oid) {
                $.post("sysDept/updateStatus", {oid: oid}, function (res) {
                    if (res.code === 0) {
                        layer.msg(res.msg);
                        treeGrid.reload(tableId);
                        layer.close(index);
                    } else {
                        obj.elem.checked = !obj.elem.checked;
                        form.render();
                        layer.close(index);
                        layer.msg(res.msg);
                    }
                });
            }
        });
    });

    function del(obj) {
        layer.confirm("你确定删除部门吗？如果存在下级部门则一并删除，此操作不能撤销！", {icon: 3, title: '提示'},
            function (index) {//确定回调
                $.post("sysDeptRole/del", {oid: obj.data.oid}, function (res) {
                    if (res.code === 0) {
                        layer.msg(res.msg);
                        layer.close(index);
                        obj.del();
                    } else {
                        layer.msg(res.msg);
                    }
                });
                layer.close(index);
            }, function (index) {//取消回调
                layer.close(index);
            }
        );
    }

    //添加
    function add(obj) {
        var index = editLayer({
            title: '添加部门',
            url: 'sysDept/edit?parentOid=' + obj.data.oid,
            area: ['500px', '600px'],
            back: callback,
            param: obj.data[treeGrid.config.indexName] + 1
        });
    }

    function edit(obj) {
        var index = editLayer({
            title: '修改部门',
            url: 'sysDept/edit?oid=' + obj.data.oid,
            area: ['500px', '600px'],
            back: callbackedit,
            param: obj
        });
    }

    function callback(ifr, index, data, param) {
        var field = data.field;
        $.post("sysDeptRole/saveOrUpdate", field, function (res) {
            if (res.code === 0) {
                topLayer.msg(res.msg);
                topLayer.close(index);
                treeGrid.reload(tableId);
            } else {
                topLayer.msg(res.msg);
            }
        });
    }

    function callbackedit(ifr, index, data, param) {
        var field = data.field;
        $.post("sysDeptRole/saveOrUpdate", field, function (res) {
            if (res.code === 0) {
                topLayer.msg(res.msg);
                topLayer.close(index);
                treeGrid.reload(tableId);
            } else {
                topLayer.msg(res.msg);
            }
        });
    }
</script>
</body>
</html>
